import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/space/setting/setting_unit_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/app_const.dart';
import 'package:share_fit/app/tools/locale_tool.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/app/tools/log_utils.dart';
import 'package:share_fit/app/ute/uteped_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class SettingUnitPage extends StatelessWidget {

  final logic = Get.put(SettingLogic());
  final state = Get.find<SettingLogic>().state;

  @override
  Widget build(BuildContext context) {
    state.showConnect = logic.read("space_unit_connect", defaultValue: false);
    state.length = logic.read(AppConst.spaceUnitLength, defaultValue: 0, global: true);
    state.weight = logic.read(AppConst.spaceUnitWeight, defaultValue: 0, global: true);
    state.temp = logic.read(AppConst.spaceUnitTemperature, defaultValue: 0, global: true);
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.setting_unit.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
        body: ListView(
          padding: EdgeInsets.fromLTRB(42.w, 97.h, 42.w, 240.h),
          children: [
            SizedBox(height: 60.h,),
            Text(LocaleKeys.unit_length.ts, style: TextStyle(fontSize: 54.sp, color: Color(0xFF898C8F),)),
            Container(
              margin: EdgeInsets.only(top: 59.h, bottom: 63.h),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitLength, 0, global: true);
                      logic.setLength(0);
                      setLanguage(0);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_km.ts, style: TextStyle(fontSize: 42.sp),),
                          // Image.asset("assets/images/space/icon_unit_sel.png", height: 30, width: 30,),
                          GetBuilder<SettingLogic>(
                              id: "setting_length_sel",
                              builder: (_){
                                return Opacity(opacity: state.length==0?1:0, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w,),);
                              })
                        ],
                      ),
                    ),
                  ),
                  const Divider(height: 1,),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitLength, 1, global: true);
                      logic.setLength(1);
                      setLanguage(1);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_mi.ts, style: TextStyle(fontSize: 42.sp),),
                          GetBuilder<SettingLogic>(
                              id: "setting_length_sel",
                              builder: (_){
                                return Opacity(opacity: state.length==0?0:1, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w,),);
                              })
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(LocaleKeys.unit_weight.ts, style: TextStyle(fontSize: 54.sp, color: Color(0xFF898C8F),)),
            Container(
              margin: EdgeInsets.only(top: 59.h, bottom: 63.h),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitWeight, 0, global: true);
                      logic.setWeight(0);
                      setWeightUnits(0);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_kg.ts, style: TextStyle(fontSize: 42.sp),),
                          GetBuilder<SettingLogic>(
                              id: "setting_weight_sel",
                              builder: (_){
                                return Opacity(opacity: state.weight==0?1:0, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w,),);
                              })
                        ],
                      ),
                    ),
                  ),
                  const Divider(height: 1,),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitWeight, 1, global: true);
                      logic.setWeight(1);
                      setWeightUnits(1);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_lb.ts, style: TextStyle(fontSize: 42.sp),),
                          GetBuilder<SettingLogic>(
                              id: "setting_weight_sel",
                              builder: (_){
                                return Opacity(opacity: state.weight==0?0:1, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w,),);
                              })
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Text(LocaleKeys.unit_temp.ts, style: TextStyle(fontSize: 54.sp, color: Color(0xFF898C8F),)),
            Container(
              margin: EdgeInsets.only(top: 59.h, bottom: 63.h),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.white
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitTemperature, 0, global: true);
                      logic.setTemp(0);
                      setTemperatureUnit(0);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_c.ts, style: TextStyle(fontSize: 42.sp),),
                          GetBuilder<SettingLogic>(
                              id: "setting_temp_sel",
                              builder: (_){
                                return Opacity(opacity: state.temp==0?1:0, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w));
                              })
                        ],
                      ),
                    ),
                  ),
                  const Divider(height: 1,),
                  GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap:(){
                      logic.save(AppConst.spaceUnitTemperature, 1, global: true);
                      logic.setTemp(1);
                      setTemperatureUnit(1);
                    },
                    child: Container(
                      height: 175.h,
                      padding: EdgeInsets.only(left: 62.w, right: 55.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(LocaleKeys.unit_f.ts, style: TextStyle(fontSize: 42.sp),),
                          // Image.asset("assets/images/space/icon_unit_sel.png", height: 30, width: 30,),
                          GetBuilder<SettingLogic>(
                              id: "setting_temp_sel",
                              builder: (_){
                                return Opacity(opacity: state.temp==0?0:1, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 53.h, width: 69.w,),);
                              })
                          // Opacity(opacity: logic.showConnect?1:0, child: Image.asset("assets/images/space/icon_unit_sel.png", height: 30, width: 30,),)
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        )
    );
  }

  void setTemperatureUnit(int value) {
    Map<String, Object> params = {UTEPedConst.keyValue: value};
    logic.setTemperatureUnit(params, back: (back) {
      logger.d('========>>> setTemperatureUnit : $back');
    });
  }

  void setWeightUnits(int value) {
    Map<String, Object> params = {UTEPedConst.keyValue: value};
    logic.setWeightUnits(params, back: (value) {
      logger.d('========>>> setLengthUnits : $value');
    });
  }

  void setLanguage(int type) {
    int language = 1;
    if(LocaleTool.locale=='en_US') {
      language = 2;
    }
    Map<String, Object> params = {'language': language, 'units': type};
    logic.setLanguage(params, back: (value) {
      logger.d('========>>> setLanguage : $value');
    });
  }
}